<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body {
            margin: 0px;
            padding: 0px;
        }
        svg.sparkline {
            width: 500px;
            height: 70px;
            font-size: 14px;
            margin-top: -6px;
        }
    </style>
</head>
<body class='with-3d-shadow with-transitions'>

<p><svg id="chart1" class="sparkline"></svg></p>
<p><svg id="chart2" class="sparkline"></svg></p>
<p><svg id="chart3" class="sparkline"></svg></p>

<script>

    function defaultChartConfig(containerId, data) {
        nv.addGraph(function() {

            var chart = nv.models.sparklinePlus();
            chart.margin({left:70})
                .x(function(d,i) { return i })
                .showLastValue(true)
                .xTickFormat(function(d) {
                    return d3.time.format('%x')(new Date(data[d].x))
                });

            d3.select(containerId)
                    .datum(data)
                    .call(chart);

            return chart;
        });
    }

    defaultChartConfig("#chart1",sine());
    defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
    defaultChartConfig("#chart3", volatileChart(25.0, 0.09,30));

    function sine() {
        var sin = [];
        var now =+new Date();

        for (var i = 0; i < 100; i++) {
            sin.push({x: now + i * 1000 * 60 * 60 * 24, y: Math.sin(i/10)});
        }

        return sin;
    }

    function volatileChart(startPrice, volatility, numPoints) {
        var rval =  [];
        var now =+new Date();
        numPoints = numPoints || 100;
        for(var i = 1; i < numPoints; i++) {

            rval.push({x: now + i * 1000 * 60 * 60 * 24, y: startPrice});
            var rnd = Math.random();
            var changePct = 2 * volatility * rnd;
            if ( changePct > volatility) {
                changePct -= (2*volatility);
            }
            startPrice = startPrice + startPrice * changePct;
        }
        return rval;
    }

</script>
</body>
</html>